<template>
  <div
    class="custom-input"
    :class="{ on: focus }"
    @click="$emit('click', $event)"
  >
    <div class="tips" :style="{ textAlign: labelAlign, color: labelColor }">
      <slot name="left" />
      {{ label }}
    </div>
    <input
      placeholder-class="placeholder-input"
      :style="{ textAlign: inputAlign }"
      :placeholder="placeholder"
      :disabled="disabled"
      :value="value"
      :type="type"
      @focus="
        $emit('focus', $event.detail.value);
        focus = true;
      "
      @blur="
        $emit('blur', $event.detail.value);
        focus = false;
      "
      @click="$emit('click', $event)"
      @input="$emit('input', $event.detail.value)"
    />
    <slot name="right" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  model: {
    event: 'input',
    prop: 'value',
  },
  props: {
    /* 输入框类型 */
    type: {
      type: String,
      default: 'text',
    },
    /* 标签配置 */
    labelAlign: String,
    labelColor: {
      type: String,
      default: '#ffc000',
    },
    /* 标签内容 */
    label: String,
    /* 表单字体对齐方式 */
    inputAlign: String,
    /* 占位符 */
    placeholder: String,
    /* 是否禁用 */
    disabled: Boolean,
    /* 表单默认值 */
    value: String,
  },
  data: () => ({
    focus: false,
  }),
  methods: {},
  computed: {},
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
});
</script>

<style lang="scss">
/* 登录页面输入框整体样式 */
.custom-input {
  display: flex;
  padding: 40rpx 0;
  position: relative;
  background-origin: border-box;
  align-items: center;
  border-bottom: solid 1rpx rgba($color: #000000, $alpha: 0.03);
  &::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    height: 1rpx;
    background: #ffc000;
    width: 0%;
    transition: 0.5s;
  }
  /* input动画 */
  &.on {
    border-bottom: solid 1rpx rgba($color: #000000, $alpha: 0);
    .tips {
      color: #ffc000;
    }
    &::after {
      content: '';
      width: 100%;
    }
  }
  .tips {
    width: 160rpx;
    font-size: $uni-font-size-lg;
    transition: 0.5s;
    .none {
      color: #fff;
    }
  }
  .tips-on {
    font-size: $uni-font-size-lg;
    color: #ffc000;
  }
  input {
    flex: 1;
    background: #fff !important;
    font-size: $uni-font-size-lg;
  }
  .placeholder-input {
    color: #9a9a9a;
  }
}
</style>
